<template>
    <div class="Rules"
        :style="style_item">
        <div class="fcb"
            :style="style_title">
            <span class="title"
                v-text="txt_rules_tile[0]" />
            <hb-button2 v-if="signed"
                :txt="txt_rules_tile[1]" />
        </div>

        <div class="body"
            :style="style_body">
            <ol class="rules-text">
                <li v-for="(value,index) in txt_rules"
                    :key="index">
                    <span v-text="value" />
                </li>
            </ol>
            <!-- <hb-button2 v-if="!signed" :txt="txt_rules_tile[1]"/> -->
        </div>
    </div>
</template>

<script>
import Lang from './lang.js'
import style from '../style.jsx'
export default {
	name: 'Rules',
	data() {
		return {
			style,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		signed() {
			return this.$store.state.user.signed
		},
		txt_rules() {
			let lang = this.lang
			return Lang.rules[lang]
		},
		txt_rules_tile() {
			let lang = this.lang
			return Lang.rules_tile[lang]
		},
		style_item() {
			return this.signed ? style.items : {}
		},
		style_title() {
			return this.signed ? style.title : {}
		},
		style_body() {
			return this.signed ? style.body : {}
		},
	},
}
</script>

<style scoped>
.Rules {
	margin: 0 auto 20px;
	width: 800px;
}
.title {
	color: var(--clr0);
}
.rules-text {
	font-size: 14px;
	color: #61688a;
	list-style-type: decimal;
}
</style>
